<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{rid?'修改':'新增'}}角色</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body" >
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>角色类型：</span>
          <div>
            <el-select
              v-model="roleType"
              filterable
              placeholder="请选择角色">
              <el-option
                v-for="(item,index) in roleOptions"
                :key="index"
                :label="item.value"
                :value="parseFloat(item.key)">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>等级：</span>
          <div>
            <el-input type="number" :class="{'error_border':tip_num===1}" placeholder="请输入等级(如：1、2、3)数字越小等级越高"
                      v-model.trim="level" :min="1" @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab">备注：</span>
          <div>
            <el-input type="text"  placeholder="请输入备注" v-model.trim="memo" @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab">状态：</span>
          <div>
            <el-radio-group v-model="proStatus">
              <el-radio :label="1">可用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </div>
        </div>
        <p class="error_line">{{infoTip}}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetail, addData, updateData } from "@/api/sys/role";
import {listByType} from "@/api/config/config";

export default {
  props:['rid'],
  data(){
    return {
      roleOptions:[],
      roleType: '',
      proStatus:1,
      memo:'',
      level:'',
      infoTip: '',
      tip_num: '',
      loading:false
    }
  },
  mounted() {
    this.getRoles();
    if (this.rid){
      this.getDetail();
    }
  },
  methods:{
    getDetail(){
      let that = this;
      this.loading = true;
      getDetail(that.rid).then(res => {
        if (res){
          that.setData(res);
        }
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },

    setData(obj){
      this.roleType=obj.type?obj.type:0;
      this.proStatus= obj.enable?obj.enable:0;
      this.memo = obj.memo?obj.memo:'';
      this.level = obj.level?obj.level:0;
    },

    getRoles(){
      listByType({type:100}).then(res => {
        this.roleOptions = res ? res :[]
      }).catch((e) => {
        this.roleOptions = [];
      });
    },

    // 确认编辑
    confirmEdit(){
      if (this.roleType === '') {
        this.setTip(0, '请选择角色类型！');
      }else if (this.level === '') {
        this.setTip(1, '请输入等级！');
      } else if (this.level&&parseFloat(this.level)%1!==0) {
        this.setTip(1, '等级需为整数！');
      }
      // else if (parseFloat(this.level)<=0) {
      //   this.setTip(1, '等级需大于0！');
      // }
      else {
        this.sendInfo();
      }
    },

    sendInfo(){
      let that = this;
      that.loading = true;
      let data = {
        enable: this.proStatus,
        type: this.roleType,
        memo: this.memo,
        level:this.level
      }
      if (that.rid) {
        data.id = that.rid;
        updateData(JSON.stringify(data)).then(response => {
          that.closePopup(true);
          that.$message.success({
            message:'操作成功！',
            duration:1500
          });
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      } else {
        addData(JSON.stringify(data)).then(response => {
          that.closePopup(true);
          that.$message.success({
            message:'操作成功！',
            duration:1500
          });
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      }
    },

    setTip(num,text){
      this.tip_num = num;
      this.infoTip = text
    },

    // 关闭
    closePopup(refresh){
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>


</style>
